<template>
    <div style="padding: 20px">
      <div class="headerBoxList">
        <span style="margin-left: 10px">{{ titleTT }}</span>
      </div>
      <div class="contentBoxYY" style="padding:20px">
        <!-- <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for="(item,index) in listData" :key="index" :title="'🚩 '+ item.titleKey+` （${item.content.length}行）`" :name="index">
              <div style="background: #282828;color: rgb(101, 177, 235);padding-left:20px;" v-for="(data,j) in item.content" :key="j">
                  {{ data }}
              </div>
          </el-collapse-item>
        </el-collapse> -->
        <el-card class="box-card" style="word-wrap:break-word; 
word-break:break-all;">
            <div v-for="(item,index) in data" :key="index" class="text item">
                {{ item }}
            </div>
            </el-card>
      </div>
    </div>
  </template>
  
  <script>
  import { getRxTmpPathApi } from '@/api/phoneInfo/index'
  export default {
    name: "proofBaseList",
    data() {
      return {
        activeName: 0,
        listData:[],
        data:'',
        titleTT:''
      };
    },
    watch: {
      jtData: {
        handler(nval, oval) {
          console.log(nval, oval);//nval改变后的新数据，oval改变前的旧数据
          if(nval.class !== oval.class){
            this.titleTT = nval.label
            this.initFunction();
          }
        },
        deep: true, // 深度监听
        immediate: true,//立即执行
      },
  },
    computed: {
      jtData() {
        return this.$route.query.nodeData.data;
      },
  },
    mounted(){
      this.initFunction();
    },
    created() {
      this.initFunction();
      
    },
    methods: {
      initFunction() {

        let node = this.$route.query.nodeData.data;
      let dataJson = {
        "proof_num":node.proof_num,
        "rxTmpPath":'/'+node.subtype
      }
      getRxTmpPathApi(dataJson).then(res=>{
        if(!res.data)return;
        this.data = res.data.split("\n");
        const stringData = res.data;
        return

        const delimiters = [
          "Latency:",
          "Package Names:",
          "App",
          "App",
          "Cache:",
        ];
  
        const dataArray = [];
        let currentData = "";
  
        for (let i = 0; i < delimiters.length; i++) {
          const delimiter = delimiters[i];
          const startIndex = stringData.indexOf(delimiter);
          const endIndex =i < delimiters.length - 1? stringData.indexOf(delimiters[i + 1]): stringData.length;
  
          if (startIndex !== -1 && endIndex !== -1) {
            const data = stringData.slice(startIndex, endIndex).trim();
            dataArray.push(data);
          }
        }
        let arr = [];
        // 格式化字符串数组为json数据
        for (let index = 0; index < dataArray.length; index++) {
          const element = dataArray[index];
          const originalString = element;
          const delimiter = "\n";
  
          const delimiterIndex = originalString.indexOf(delimiter);
  
          if (delimiterIndex !== -1) {
            const firstPart = originalString.substring(0, delimiterIndex).trim();
            const secondPart = originalString
              .substring(delimiterIndex + 1)
              .trim();
            let item = {
              titleKey: firstPart,
              content: secondPart.split("\n"),
            };
            arr.push(item);
          } else {
            console.log("Delimiter not found in the string.");
          }
  
          // arr.push(item)
        }
        this.listData = arr;s
      }).catch(error=>{
        
      })

      },
    },
  };
  </script>
  
  <style scoped>
  .headerBoxList {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
  }
  .contentBoxYY{
      width: 95%; 
      margin: 0 auto;
      overflow: hidden;
      height:95vh;
      overflow-y: auto;
  }
  @media screen and (min-width: 2360px) {
      .contentBoxYY{
          width: 95%; 
          margin: 0 auto;
          overflow: hidden;
          height:67vh;
          overflow-y: auto;
      }
  }
  
  </style>